<template>
    <div>
        <!--    轮播图-->
        <jh-banner :data='bannerList' />
        <div class='home-container'>
            <div class='filter'>
                <div class='tags'>
                    <span
                        v-for='(tag,index) in tags' :key='tag' :class='{
                        active:index==activeIdx
                    }' class='tag' @click='tagHandler(index,tag)'>{{ tag }}</span>
                </div>
                <div class='keywords'>
                    <el-form :model='queryParams' @keydown.enter.prevent='queryHandler'>
                        <el-input
                            v-model='queryParams.title'
                            clearable placeholder='搜索比赛...' @clear='clearHandler' />
                    </el-form>
                </div>
            </div>
            <!--            比赛-->
            <div v-if='competitionList?.length' class='competitions'>
                <div
                    v-for='competition in competitionList' :key='competition.competitionId' class='competition'
                    @click='$router.push(`/competitionDetail/${competition.competitionId}?judgeIds=${competition?.judgeIds}`)'>
                    <div class='cover'>
                        <img alt='cover' :src='`/api${competition.cover}`'>
                        <span
                            v-if='competitionAssertStatus(competition)==="未开始"' class='status'
                            style='background: rgba(64,158,255,0.9);'>{{ competitionAssertStatus(competition)
                            }}</span>
                        <span
                            v-else-if='competitionAssertStatus(competition)==="进行中"' class='status'
                            style='background: rgba(245,108,108,0.9);'>{{ competitionAssertStatus(competition)
                            }}</span>
                        <span
                            v-else-if='competitionAssertStatus(competition)==="已结束"'
                            class='status'
                            style='background: rgba(144,147,153,0.9);'>{{ competitionAssertStatus(competition)
                            }}</span>
                        <template v-else></template>
                    </div>
                    <div class='info'>
                        <div class='title'>
                            {{ competition.title }}
                        </div>
                        <div class='date'>
                            比赛时间：{{ parseTime(competition.startTime, '{y}/{m}/{d}')
                            }}-{{ parseTime(competition.endTime, '{y}/{m}/{d}') }}
                        </div>
                        <div class='date'>
                            报名时间：{{ parseTime(competition.signStartTime, '{y}/{m}/{d}')
                            }}-{{ parseTime(competition.signEndTime, '{y}/{m}/{d}') }}
                        </div>
                        <div class='other'>
                            <div>
                                <img alt='look' src='@/assets/index/look.png'>
                                <span>{{ handleCount(competition?.views || 0) }}</span>
                            </div>
                            <div>
                                <img alt='collect' src='@/assets/index/collect.png'>
                                <span>{{ handleCount(competition?.collect || 0) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if='!queryParams.title&&!competitionList?.length' class='competitions empty'>
                暂无比赛
            </div>
            <div v-else-if='queryParams.title&&!competitionList?.length&&queried' class='competitions empty'>
                没有找到关键字[<span style='color: #E65D6E;'>{{ queryParams.title }}</span>]下的相关比赛
            </div>
            <div v-else class='competitions empty'>
                暂无比赛
            </div>
            <!--分页-->
            <div class='pagination'>
                <pagination
                    v-show='total > 0'
                    v-model:limit='queryParams.pageSize'
                    v-model:page='queryParams.pageNum'
                    :total='total'
                    layout='total, prev, pager, next'
                    @pagination='getList'
                />
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import JhBanner from '@/components/JhBaner/JhBanner.vue';
import type { Ref } from 'vue';
import { reactive, ref, toRefs } from 'vue';
import { listCompetition } from '@/api/business/competition';
import { Competition } from '@/api/model/Competition';
import { competitionAssertStatus, handleCount, parseTime } from '@/utils/sk';
import { listBanner } from '@/api/business/banner';
import { Banner } from '@/api/model/Banner';

const bannerList: Ref<Banner[]> = ref([]);
const queried = ref(false);
const tags = reactive(['热门赛事', '全部赛事']);
const activeIdx = ref(0);
const total = ref(9);
const competitionList: Ref<Competition[]> = ref([]);

/*请求参数定义*/
const data = reactive({
    form: {},
    queryParams: { pageNum: 1, pageSize: 9, title: '', params: { type: 'hot' } }
});
const { form, queryParams } = toRefs(data);
const tagHandler = (index: number, tag: string) => {
    activeIdx.value = index;//切换索引
    queryParams.value.params['type'] = tag === '热门赛事' ? 'hot' : 'all';
    clearHandler();
};
/*获取比赛列表*/
const getList = () => {
    listCompetition(queryParams.value).then(response => {
        competitionList.value = response.rows;
        total.value = response.total;
    });
};
/*获取轮播图列表*/
const getBannerList = () => {
    listBanner().then(res => {
        bannerList.value = res.rows;
    });
};
getBannerList();
/*查询*/
const queryHandler = () => {
    queried.value = true;
    queryParams.value.pageNum = 1;
    getList();
};
/*清除*/
const clearHandler = () => {
    queried.value = false;
    queryParams.value.title = '';
    queryParams.value.pageNum = 1;
    getList();
};
getList();
</script>
<style lang='scss' scoped>
.empty {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    display: block !important;
}

.home-container {
    padding: 0 250px;
    min-height: 500px;

    .filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        .keywords {
            width: 320px;
        }
    }

    .tags {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        display: flex;

        .tag {
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 100px;
            background-color: #fff;
            color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            width: 120px;
            margin-right: 20px;
            transition: 0.2s;

            &:hover {
                //transform: translate(0,-5px);
                box-shadow: var(--el-box-shadow);
            }

            &.active {
                background: rgba(64, 158, 255, 0.8);
                color: #fff;
            }
        }
    }

    .competitions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        //padding-top: 10px;
        min-height: 300px;

        .competition {
            display: flex;
            flex-direction: column;
            min-height: 350px;
            width: 450px;
            overflow: hidden;
            border-radius: 10px;
            margin-right: 35px;
            margin-bottom: 20px;
            transition: all 0.15s linear;
            cursor: pointer;


            &:nth-child(3n) {
                margin-right: 0;
            }

            &:hover {
                box-shadow: var(--el-box-shadow);
                //margin-bottom: 5px;
                transform: translate(0px, -10px);
            }
        }

        .cover {
            height: 180px;
            width: 100%;
            position: relative;

            .status {
                position: absolute;
                top: 0;
                right: 0;
                width: 96px;
                height: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 0 0 0 6px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.8);
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .info {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            flex: 1;
            //transition: all 0.15s linear;
            //&:hover{
            //    background-color: #d4efff;
            //    .title{
            //        color: rgba(0, 0, 0, 0.7);
            //    }
            //    .date{
            //        color: rgba(0, 0, 0, 0.5);
            //    }
            //}
            .title {
                font-size: 18px;
                font-weight: 900;
                color: rgba(0, 0, 0, 0.8);
                @include ellipsisOption(3);
            }

            .date {
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.6);
                margin: 10px 0;
            }
        }

        .other {
            display: flex;
            justify-content: right;
            font-size: 16px;
            font-weight: 400;
            color: #3D3D3D;

            img {
                margin-right: 5px;
            }

            div {
                display: flex;
                align-items: center;
                margin-left: 20px;
            }
        }
    }


}
</style>
